<template>
	<el-container class="index">
		<!-- 头部区域 -->
		<el-header>
			<div>
				<img src="../../assets/img/logo.png" style="width:30px;height:30px">
				<span>博客管理系统</span>
			</div>
			<el-button type="info" @click="loginout">退出</el-button>
		</el-header>
		<!-- 页面主体 -->
		<el-container>
			<!-- 侧边栏主体 -->
			<el-aside :width="istoggle ? '64px':'200px'" >
				<!-- 折叠 -->
				<div class="toggle_btn" @click="togglebtn">
					<span :style="istoggle ? 'transform: rotate(90deg) ': 'transform: rotate(180deg)'">|||</span>
				</div>
				
				<!-- 侧边栏菜单 -->
				<el-menu text-color="#fff" active-text-color="#4687ff" background-color="#333744" 
				:collapse="istoggle" :collapse-transition="false" 
				router unique-opened :default-active="activepath">
					<!-- 1级菜单 -->
					<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
						<!-- 1级菜单的模板区域 -->
						<template slot="title">
							<!-- 图标 -->
							<i :class="iconList[item.id]" ></i>
							<!-- 文本 -->
							<span>{{item.authName}}</span>
						</template>
						<!-- 分组菜单 -->
						<!-- <el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group title="分组2">
							<el-menu-item index="1-3">选项3</el-menu-item>
						</el-menu-item-group> -->

						<!-- 二级菜单 -->
						<el-menu-item :index="'/'+ twoitem.path" 
						v-for="twoitem in item.children" :key="twoitem.id" 
						@click="savenav('/'+twoitem.path)">
							<!-- 图标 -->
							<i class="el-icon-menu"></i>
							<!-- 文本 -->
							<span>{{twoitem.authName}}</span>
						</el-menu-item>
						
						<!-- 
						3级菜单
						<el-submenu index="1-4">
							<template slot="title">选项4</template>
							<el-menu-item index="1-4-1">选项1</el-menu-item>
						</el-submenu> -->
					</el-submenu>
					<!-- <el-menu-item index="2">
						<i class="el-icon-menu"></i>
						<span slot="title">导航二</span>
					</el-menu-item>
					<el-menu-item index="3" disabled>
						<i class="el-icon-document"></i>
						<span slot="title">导航三</span>
					</el-menu-item> -->
					<el-menu-item index="/music">
						<i class="el-icon-setting"></i>
						<span slot="title">音乐</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<!-- 右内容主体 -->
			<el-main>
				<!-- 路由占位符 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
						authName: "博客首页",
						children: [{
							authName: "首页",
							id: 111,
							order: 1,
							path: 'welcome',
						}],
						id: 100,
						order: 1,
						path: 'blogindex'
					}, {
						authName: "星座物语",
						children: [{
							authName:"火象星座",
							id:112,
							order:1,
							path:'firesigns'
						}, {
							authName:"水象星座",
							id:113,
							order:1,
							path:'watersigns'
						},{
							authName:"土象星座",
							id:114,
							order:1,
							path:'earthsigns'
						},{
							authName:"风象星座",
							id:119,
							order:1,
							path:'airsigns'
						}
						],
						id: 101,
						order: 2,
						path: 'signs'

					}, {
						authName: "励志语录",
						children: [{
							authName:"成长语录",
							id:115,
							order:1,
							path:'growup'
						}, {
							authName:"青春语录",
							id:116,
							order:1,
							path:'youth'
						}, {
							authName:"爱情语录",
							id:117,
							order:1,
							path:'love'
						}],
						id: 102,
						order: 3,
						path: 'quotations'

					}, {
						authName: "留言板",
						children: [{
							authName:"全部留言",
							id:118,
							order:1,
							path:'allboard'
						}],
						id: 103,
						order: 4,
						path: 'board'

					}
					],
				iconList:{
					'100':'el-icon-orange',
					'101':'el-icon-sunny',
					'102':'el-icon-present',
					'103':'el-icon-chat-dot-round',
				},
				// 默认不折叠
				istoggle:false,
				// 被激活的链接动态地址
				activepath:''
			}
		},
		created() {
			this.activepath = sessionStorage.getItem('activepath')
		},
		
		methods: {
			// 退出登录
			loginout() {
				localStorage.clear()
				this.$router.replace('/login')
			},
			//折叠
			togglebtn(){
				this.istoggle = !this.istoggle
			},
			// 设置默认2级菜单点击
			savenav(activeroute){
				sessionStorage.setItem('activepath',activeroute)
				this.activepath = activeroute
			}
			
			
			
		}

	}
</script>

<style lang="less" scoped>
	.index {
		width: 100%;
		height: 100%;

		.el-header {
			background-color: #373D41;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 0;

			>div {
				font-size: 20px;
				color: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					display: inline-block;
					margin-left: 10px;
				}
			}

		}

		.el-aside {
			background-color: #333744;
			.el-menu{
				border: none;
			}
			.toggle_btn{
				width: 100%;
				height: 30px;
				background-color: #4A5064;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				//文字间距
				font-size: 12px;
				letter-spacing: 0.3em;
				cursor: pointer;
				span{
					margin-top: 5px;
				}
			}
		}

		.el-main {
			background-color: #eaedf1;
		}



	}

	//.index
</style>
